#{extends 'tags/layouts/main.html' /}
#{set title:'Home' /}

#{set 'moreStyles'}
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-0.7.3/leaflet.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-contextmenu/leaflet.contextmenu.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-draw/leaflet.draw.css'}">
    <link rel="stylesheet" media="screen" href="@@{'/public/plugin/leaflet-locate/L.Control.Locate.min.css'}">
    <!--[if lt IE 9]>
      <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.ie.css" />
      <link rel="stylesheet" href="@@{'/public/plugin/leaflet-locate/L.Control.Locate.ie.min.css'}"/>
    <![endif]-->
#{/set}

    <!-- begin timeline -->
    <ul class="timeline">
        <li>
            <!-- begin timeline-time -->
            <div class="timeline-time">
                <span class="date">today</span>
                <span class="time">04:20</span>
            </div>
            <!-- end timeline-time -->
            <!-- begin timeline-icon -->
            <div class="timeline-icon">
                <a href="javascript:;"><i class="fa fa-paper-plane"></i></a>
            </div>
            <!-- end timeline-icon -->
            <!-- begin timeline-body -->
            <div class="timeline-body">
                <div class="timeline-header">
                    <span class="userimage"><img src="./Color Admin   Timeline_files/user-1.jpg" alt=""></span>
                    <span class="username"><a href="javascript:;">John Smith</a> <small></small></span>
                    <span class="pull-right text-muted">18 Views</span>
                </div>
                <div class="timeline-content">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc faucibus turpis quis tincidunt luctus.
                        Nam sagittis dui in nunc consequat, in imperdiet nunc sagittis.
                    </p>
                </div>
                <div class="timeline-footer">
                    <a href="javascript:;" class="m-r-15"><i class="fa fa-thumbs-up fa-fw"></i> Like</a>
                    <a href="javascript:;"><i class="fa fa-comments fa-fw"></i> Comment</a>
                </div>
            </div>
            <!-- end timeline-body -->
        </li>
        
        <li>
            <!-- begin timeline-icon -->
            <div class="timeline-icon">
                <a href="javascript:;"><i class="fa fa-spinner"></i></a>
            </div>
            <!-- end timeline-icon -->
            <!-- begin timeline-body -->
            <div class="timeline-body">
                Loading...
            </div>
            <!-- begin timeline-body -->
        </li>
    </ul>
    <!-- end timeline -->

#{set 'moreScripts'}
    <script src="@@{'/public/plugin/leaflet-0.7.3/leaflet-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-contextmenu/leaflet.contextmenu-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-draw/leaflet.draw-src.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/plugin/leaflet-locate/L.Control.Locate.min.js'}" type="text/javascript" charset="${_response_encoding}"></script>
    <script src="@@{'/public/js/site/map.js'}" type="text/javascript" charset="${_response_encoding}"></script>
#{/set}